<template>
  <div class="home container">
    <el-row :gutter="20">
      <!-- 轮播图 -->
      <el-col :lg="12" :md="6">
        <el-carousel trigger="click" height="363px">
          <el-carousel-item v-for="item in swiperList" :key="item.id">
            <RouterLink :to="`/detail/${item.id}`">
              <img :src="baseURL + item.image" alt="" />
            </RouterLink>
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <!-- 表格 -->
      <el-skeleton :loading="!advList.length" animated>
        <el-col class="grid" :lg="6" :md="6" v-for="item in advList" :key="item.id">
          <template>
            <a href="#" class="item">
              <img :src="baseURL + item" alt="" />
            </a>
          </template>
        </el-col>
        <template slot="template">
          <el-col class="grid" :lg="6" :md="6" v-for="i in 4" :key="i">
            <el-skeleton-item variant="image" style="height: 172px"></el-skeleton-item>
          </el-col>
        </template>
      </el-skeleton>
    </el-row>

    <!-- 最新内容 -->
    <el-row>
      <el-col class="list" :lg="18" :md="18">
        <el-skeleton :loading="!contentList.length" animated>
          <template>
            <el-col class="item" :lg="12" :md="12" v-for="item in contentList" :key="item.id">
              <el-card :body-style="{ padding: '10px' }">
                <div slot="header">
                  <span>{{ item.catename }}</span>
                  <el-link
                    :href="`#/detail/${item.id}`"
                    class="more"
                    :underline="false"
                    style="float: right; padding: 3px 0"
                  >
                    [查看更多]
                  </el-link>
                </div>
                <RouterLink class="card-pic" :to="`/detail/${item.id}`">
                  <img :src="baseURL + item.image" alt="" />
                  <span class="mask">
                    <i class="el-icon-search" />
                  </span>
                </RouterLink>
                <div class="date">
                  <i class="el-icon-date" />
                  {{ item.created_at }}
                </div>
                <RouterLink class="title" :to="`/detail/${item.id}`">{{ item.title }}</RouterLink>
                <div class="content" v-html="item.content.slice(0, 60) + '...'"></div>
              </el-card>
            </el-col>
          </template>
          <template slot="template">
            <el-col class="item" :lg="12" :md="12" v-for="i in 4" :key="i">
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  width: 100%;
                  padding: 18px 20px;
                "
              >
                <el-skeleton-item variant="text" style="width: 15%; height: 16px" />
                <el-skeleton-item variant="text" style="width: 20%; height: 12px" />
              </div>
              <div style="padding: 10px">
                <el-skeleton-item variant="image" style="width: 100%; height: 250px" />
                <div style="margin-top: 10px">
                  <el-skeleton-item variant="caption" style="width: 50%; height: 20px" />
                </div>
                <div style="margin-top: 10px">
                  <el-skeleton-item variant="caption" style="width: 100%; height: 30px" />
                </div>
                <div style="margin-top: 10px">
                  <el-skeleton-item variant="text" style="width: 100%; height: 80px" />
                </div>
              </div>
            </el-col>
          </template>
        </el-skeleton>
      </el-col>
      <el-col :lg="6" :md="6">
        <!-- 热门内容 -->
        <MyHot />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { reqSwiperList, reqAdvList, reqContentList } from '@/api'
import { baseURL } from '@/utils/request.js'
import MyHot from '@/components/MyHot'

export default {
  name: 'Home',
  components: { MyHot },
  data() {
    return {
      // 路径前缀
      baseURL: baseURL + 'upload/',
      // 轮播列表
      swiperList: [],
      // 广告列表
      advList: [],
      // 文章列表
      contentList: []
    }
  },
  created() {
    this.getSwiperList()
    this.getAdvList()
    this.getContentList()
  },
  methods: {
    // 获取轮播图列表
    async getSwiperList() {
      const { data: res } = await reqSwiperList()
      this.swiperList = res
    },
    // 获取广告列表
    async getAdvList() {
      const { data: res } = await reqAdvList()
      this.advList = res.split('|')
    },
    // 获取文章列表
    async getContentList() {
      const { data: res } = await reqContentList()
      this.contentList = res
    }
  }
}
</script>

<style lang="less" scoped>
.el-row {
  padding: 20px 0 0 0;
}

.grid {
  margin-bottom: 18px;

  .item {
    display: block;
    overflow: hidden;
  }

  img {
    width: 100%;
    transition: all 0.35s;

    &:hover {
      transform: scale(1.12);
    }
  }
}

.list {
  .item {
    margin-bottom: 40px;
    padding-right: 40px;
  }

  .el-card {
    width: 100%;

    .more {
      font-size: 12px;

      &:hover {
        color: @primaryColor;
      }
    }

    .card-pic {
      display: block;
      position: relative;
      width: 100%;
      height: 250px;

      &:hover {
        .mask {
          opacity: 1;

          i {
            transform: translateY(0);
          }
        }
      }

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .mask {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        opacity: 0;
        transition: all 0.35s;

        i {
          width: 50px;
          height: 50px;
          text-align: center;
          line-height: 50px;
          font-size: 20px;
          border-radius: 50%;
          color: #fff;
          background-color: @primaryColor;
          transform: translateY(50%);
          transition: all 0.35s;
        }
      }
    }

    .date {
      font-size: 14px;
      margin: 16px 0 10px;
      color: #6e7378;
    }

    .title {
      display: block;
      font-size: 20px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: 10px;
    }

    .content {
      line-height: 1.8em;
      margin: 18px 0;
    }
  }
}
</style>
